<template>
  <div class="special-zone">
    <div class="special-title">
      <svg-icon iconClass="speicial_product" className="icon-special"></svg-icon>
      <span class="special-text">特色专区</span>
    </div>
    <div class="products-wrapper">
      <div class="special-news" v-for="newItem in specialZoneList.newItemList" :key="newItem.id">
        <span class="title">{{newItem.title}}</span>
        <p class="subtitle">{{newItem.subtitle}}</p>
        <img class="item-img" v-lazy="newItem.imageOne" alt="">
        <img class="item-img" v-lazy="newItem.imageTwo" alt="">
      </div>
      <div class="special-hots" v-for="hotItem in specialZoneList.hotItemList" :key="hotItem.id">
        <span class="title">{{hotItem.title}}</span>
        <p class="subtitle">{{hotItem.subtitle}}</p>
        <img class="item-img" v-lazy="hotItem.imageOne" alt="">
        <img class="item-img" v-lazy="hotItem.imageTwo" alt="">
      </div>
      <div class="special-vip" v-for="vipItem in specialZoneList.vipItemList" :key="vipItem.id">
        <span class="title">{{vipItem.title}}</span>
        <p class="subtitle">{{vipItem.subtitle}}</p>
        <img class="item-img" v-lazy="vipItem.imageOne" alt="">
        <img class="item-img" v-lazy="vipItem.imageTwo" alt="">
      </div>
      <div class="special-others">
        <div class="special-eat" v-for="eatItem in specialZoneList.otherItemList" :key="eatItem.id">
          <span class="title">{{eatItem.title}}</span>
          <p class="subtitle">{{eatItem.subtitle}}</p>
          <img class="item-img" src="../../../assets/img/special/peanut.jpeg" alt="">
        </div>
        <div class="special-cheap" v-for="cheapItem in specialZoneList.lowPriceItemList" :key="cheapItem.id">
          <span class="title">{{cheapItem.title}}</span>
          <p class="subtitle">{{cheapItem.subtitle}}</p>
          <img class="item-img" v-lazy="cheapItem.image" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SpecialZone',
  props: {
    specialZoneList: {
      type: Object,
      default: () => []
    }
  },
  data () {
    return {
      Special: [],
      data: []
    }
  },
  mounted () {
    this.$nextTick(() => {
      this._initData()
    })
  },
  methods: {
    _initData () {
      this.data = Object.entries(this.specialZoneList).reduce((p, [k, v]) => ([...p, v]), [])
    }
  }
}

</script>
<style lang='scss' scoped>
.special-zone {
  margin-top: px2rem(11);
  padding: px2rem(21) 0 px2rem(16) 0;
  .special-title {
    height: px2rem(27);
    margin: 0 px2rem(10) px2rem(10) px2rem(5);
    .icon-special {
      width: px2rem(25);
      height: px2rem(25);
      vertical-align: middle;
    }
    .special-text {
      font-size: px2rem(18);
      padding-left: px2rem(3);
      height: px2rem(22);
      line-height: px2rem(22);
      vertical-align: middle;
    }
  }
  .products-wrapper {
    display: flex;
    flex-wrap: wrap;
    border: px2rem(0.17) solid $text-color-line;
    margin-left: 2.5%;
    @include setWH(95%, px2rem(175));
    .special-news,
    .special-hots,
    .special-vip,
    .special-others,
    .special-eat,
    .special-cheap {
      @include setWH(50%, px2rem(88));
      .title {
        @include setFontColor(px2rem(11), transparent);
        padding-left: px2rem(8);
        padding-top: px2rem(8);
        -webkit-background-clip: text;
      }
      .subtitle {
        @include setFontColor(px2rem(8), $text-color-pl);
        padding-left: px2rem(8);
        padding-top: px2rem(5);
      }
      .item-img {
        @include setWH(px2rem(74), px2rem(44));
        padding: px2rem(5) px2rem(9) 0 px2rem(12);
      }
    }
    .special-news {
      border-right: px2rem(0.17) solid $text-color-line;
      border-bottom: px2rem(0.17) solid $text-color-line;
      .title {
        width: 100%;
        background-image: linear-gradient(135deg, red, orange);
      }
    }
    .special-hots {
      border-bottom: px2rem(0.17) solid $text-color-line;
      .title {
        background-image: linear-gradient(150deg, #b2233f, #f70d3c);
      }
    }
    .special-vip {
      border-right: px2rem(0.1) solid $text-color-line;
      .title {
        background-image: linear-gradient(150deg, #0e9e09, #51b14d);
      }
    }
    .special-others {
      display: flex;
      .special-eat {
        border-right: 0.01rem solid $text-color-line;
        .title {
          background-image: linear-gradient(150deg, #810c1f, #51b14d);
        }
      }
      .special-cheap {
        .title {
          background-image: linear-gradient(150deg, #e97d8a, #111411);
        }
      }
    }
  }
}
</style>
